<template>
	<view class="content">
		<view class="header">
			<view class="navbar" :style="{height: systemBarHeight + 'px'}">
			</view>

			<view class="information" @click="info()">
				<image src="/static/info.png" mode=""></image>
				<text>小暖知识谈</text>
			</view>

			<view class="type">
				<view class="typelist" @click="message()">
					<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
						<image style="height: 61.07rpx; width: 61.07rpx;margin: auto;" src="/static/xx.png" mode="">
						</image>
					</uni-badge>
					<text>消息</text>
				</view>

				<view class="typelist" @click="myadd()">
					<image src="/static/gz.png" mode=""></image>
					<text>关注</text>
				</view>

				<view class="typelist" @click="browse()">
					<image src="/static/ll.png" mode=""></image>
					<text>浏览纪录</text>
				</view>
			</view>
		</view>

		<!-- 收藏 -->
		<view class="collect">
			<view class="collect_tit">
				我的收藏
			</view>
			<view class="collect_list">
				<view class="collect_item" @click="mylove(2)">
					<image src="/static/sc1.png" mode=""></image>
					<text>机型</text>
				</view>
				<view class="collect_item" @click="mylove(0)">
					<image src="/static/sc2.png" mode=""></image>
					<text>文章</text>
				</view>
				<view class="collect_item" @click="mylove(1)">
					<image src="/static/sc3.png" mode=""></image>
					<text>视频</text>
				</view>
			</view>
		</view>

		<!--经销商 -->
		<view class="dealer" @click="dealersettet()">
			<view class="dealer_lf">
				<image src="/static/jxs.png" mode=""></image>
				<text>经销商申请入驻</text>
			</view>
			<view class="dealer_rg">
				<text>去授权</text>
				<image src="/static/ck.png" mode=""></image>
			</view>
		</view>
		<!-- KE客服 -->
		<view class="service" @click="open()">
			<view class="service_lf">
				<image src="/static/kf.png" mode=""></image>
				<text>联系客服</text>
			</view>
			<view class="service_rg">
				<text>去联系</text>
				<image src="/static/ck.png" mode=""></image>
			</view>
		</view>
		<!-- 附近经销商 -->
		<view class="neardealer">
			<view class="neardealer_tit">
				<text>附近经销商</text>
			</view>

			<view class="neardealer_item" v-for="(item,index) in dealerList" :key="index">
				<view class="neardealer_item_lf">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<view class="neardealer_item_rg">
					<view class="neardealer_item_rg1">
						<text>{{item.tit}}AB</text>
					</view>
					<view class="neardealer_item_rg2">
						<image src="/static/dw.png" mode=""></image>
						<text>距离您现在的位置1.3km</text>

					</view>
				</view>
			</view>
		</view>


		<u-popup :show="show" :round="31" mode="center" @close="close" @open="open">
			<view class="kefu">
				<view class="kefu_tit">
					<image src="/static/index/guanbi.png" mode="" @click="close()"></image>
				</view>
				<view class="kefu_img">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<view class="kefu_ttt">
					<text>请联系客服人员</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				value: 11,
				show: false,
				dealerList: [{
						img: '',
						tit: '经销商经销商经销商AB',
						distance: '12'
					},
					{
						img: '',
						tit: '经销商经销商经销商AB',
						distance: '12'
					},
					{
						img: '',
						tit: '经销商经销商经销商AB',
						distance: '12'
					},


				]

			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			login() {
				uni.navigateTo({
					url: '/pages/mine/login'
				})
			},
			/* 消息 */
			message() {
				uni.navigateTo({
					url: '/pages/mine/message'
				})
			},
			myadd() {
				uni.navigateTo({
					url: '/pages/mine/myadd'
				})
			},
			dealersettet() {
				uni.navigateTo({
					url: '/pages/mine/dealer_setter'
				})
			},
			/* 浏览记录 */
			browse() {
				uni.navigateTo({
					url: '/pages/mine/browse'
				})
			},
			mylove(type) {
				console.log(type)
				uni.navigateTo({
					url: '/pages/mine/my_give?current=' + type
				})
			},
			open() {
				// console.log('open');
				this.show=true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			info(){
				uni.navigateTo({
					url:'/pages/mine/information'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		padding-bottom: 40rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		background-image: url("");
		background-size: 100% 420rpx;
		background-repeat: no-repeat;

		background-color: #FFFFFF;
	}

	.header_bg {}

	.information {
		margin-top: 120rpx;
		padding-left: 52rpx;
		display: flex;
		align-items: center;

		>image {
			width: 115rpx;
			height: 115rpx;
			border-radius: 57.5rpx;
			border: 3rpx solid #FFFFFF;
		}

		>text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 38rpx;
			color: #152034;
			margin-left: 30rpx;
		}
	}

	.type {
		width: 91%;
		height: 181rpx;
		background: #FFFFFF;
		position: relative;
		margin: 52rpx auto 0;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		display: flex;

		.typelist {
			width: 33%;
			margin: auto;
			display: flex;
			flex-direction: column;

			>image {
				width: 61.07rpx;
				height: 61.07rpx;
				margin: auto;
			}

			>text {
				margin: auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #152034;
				margin-top: 15rpx;
			}

			.uni-badge-left-margin {
				display: flex;
				justify-content: center;
			}

			.ts {
				width: 42rpx;
				height: 27rpx;
				background: #FF411C;
				border-radius: 13rpx 13rpx 13rpx 13rpx;
			}
		}
	}

	.collect {

		width: 750rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 17rpx;

		.collect_tit {
			width: 93%;
			margin: auto;
			padding-top: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #152034;
		}

		.collect_list {

			display: flex;
			justify-content: center;
			width: 93%;
			margin: 17rpx auto 0;
			justify-content: space-between;

			.collect_item {
				width: 219rpx;
				height: 95rpx;
				background: #EBF5FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;

				align-items: center;

				>image {
					width: 45.8rpx;
					height: 45.8rpx;
					margin-left: 30rpx;
				}

				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 27rpx;
					color: #152034;
					margin-left: 15rpx;

				}
			}
		}

	}

	.dealer {
		margin-top: 15rpx;
		height: 95rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 38rpx;
		padding-right: 38rpx;

		.dealer_lf {
			display: flex;
			align-items: center;

			>image {
				width: 34.35rpx;
				height: 34.35rpx;
			}

			>text {
				margin-left: 15rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #152034;
			}
		}

		.dealer_rg {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #7D8CA4;
			display: flex;
			align-items: center;

			>image {
				width: 34.35rpx;
				height: 34.35rpx;
				margin-left: 15rpx;
			}
		}

	}

	.service {
		margin-top: 15rpx;
		height: 95rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 38rpx;
		padding-right: 38rpx;

		.service_lf {
			display: flex;
			align-items: center;

			>image {
				width: 34.35rpx;
				height: 34.35rpx;
			}

			>text {
				margin-left: 15rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #152034;
			}
		}

		.service_rg {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #7D8CA4;
			display: flex;
			align-items: center;

			>image {
				width: 34.35rpx;
				height: 34.35rpx;
				margin-left: 15rpx;
			}
		}
	}

	.neardealer {
		margin-top: 15rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.neardealer_tit {
			padding-top: 30rpx;
			width: 93%;
			margin: 0 auto 15rpx;
			padding-bottom: 15rpx;
		}

		.neardealer_item {
			width: 89%;
			margin: 15rpx auto 0;
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			.neardealer_item_lf {

				>image {
					width: 69rpx;
					height: 69rpx;
					border-radius: 34.5rpx;
				}
			}

			.neardealer_item_rg {
				margin-left: 13rpx;

				.neardealer_item_rg1 {
					>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #152034;
					}
				}

				.neardealer_item_rg2 {
					display: flex;
					align-items: center;
					margin-top: 15rpx;

					>image {
						width: 30.53rpx;
						height: 30.53rpx;
					}

					>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #7D8CA4;
					}
				}
			}
		}
	}

	.kefu {
		width: 546rpx;
		height: 622rpx;
		background: #FFFFFF;
		border-radius: 31rpx 31rpx 31rpx 31rpx;

		.kefu_tit {
			padding-top: 30rpx;
			width: 91%;
			margin: auto;
			display: flex;
			justify-content: space-between;

			>image {
				width: 61.07rpx;
				height: 61.07rpx;
				margin-left: auto;
			}
		}

		.kefu_img {
			margin-top: 38rpx;
			display: flex;
			justify-content: center;

			>image {
				width: 316.79rpx;
				height: 316.79rpx;
			}
		}

		.kefu_ttt {

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #152034;
			margin-top: 57rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>